<template>
<div>
  <div class="row-main">
    <el-button type="shenda" size="small" @click="showAddRoles">添加雇员</el-button>
    <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中 " element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-table-column prop="loginname" label="账号" align="center"></el-table-column>
      <el-table-column prop="employeeName" label="名字" align="center"></el-table-column>
      <el-table-column prop="employeeMobile" label="电话" align="center"></el-table-column>
      <el-table-column prop="employeeEmail" label="邮箱" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <div>
              <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-button class="operation" style="margin: 0 auto; width: 100%;" @click="showDeleteEmployee(scope.row)">删除</el-button>
              <el-button class="operation" style="margin: 0 auto; width: 100%;" @click="assignRole(scope.row)">分配权限</el-button>
              <el-button class="operation" style="margin: 0 auto; width: 100%;" @click="repassword(scope.row)">重置密码</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div :style="{'overflow':$store.state.app.screenWidth<992?'scroll':'auto'}">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="row-main-pager"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background></el-pagination>
    </div>
  </div>
  <!--添加-->
  <el-dialog class="add" title="添加雇员 " :visible.sync="addEmployees" :append-to-body="true" width="600px">
    <el-form :model="addEmployeeObj" :rules="addEmployeesRules" ref="addEmployeeObj" label-width="120px" >
      <el-form-item label="账号：" prop="loginname">
        <el-input style="width: 80%;" v-model="addEmployeeObj.loginname"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input style="width: 80%;" v-model="addEmployeeObj.password"></el-input>
      </el-form-item>
      <el-form-item label="名字：" prop="employeeName">
        <el-input style="width: 80%;" v-model="addEmployeeObj.employeeName"></el-input>
      </el-form-item>
      <el-form-item label="手机：" prop="employeeMobile">
        <el-input style="width: 80%;" v-model="addEmployeeObj.employeeMobile"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="employeeEmail">
        <el-input style="width: 80%;" v-model="addEmployeeObj.employeeEmail"></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer" slot="footer">
      <el-button @click="addEmployees = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="submitAddEmployee('addEmployeeObj')" v-preventReClick>确 定</el-button>
    </span>
  </el-dialog>
  <!--删除-->
  <el-dialog class="delete" top="33vh" :visible.sync="deleteEmployee" :append-to-body="true" width="30%"><span style="display: flex; justify-content: center; color: red; font-family: 微软雅黑;">确定删除该角色吗？</span><span class="dialog-footer" slot="footer">
      <el-button @click="deleteEmployee = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="submitDeleteEmployee" v-preventReClick>确 定</el-button></span>
    <!--添加-->
  </el-dialog>
  <el-dialog class="assign" title="分配雇员" align="center" top="33vh" :visible.sync="assign" :append-to-body="true" width="30%">
    <el-checkbox-group v-model="roleIds" >
      <el-checkbox v-for="role in roleList" :label="role.id" :key="role.id">{{role.name}}</el-checkbox>
    </el-checkbox-group><span class="dialog-footer" slot="footer">
      <el-button @click="assign = false" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="assignRoleToEmployee" v-preventReClick>确 定</el-button></span>
  </el-dialog>
</div>
</template>

<script>
import {listRoles,listEmployeeRolesIds,loginRoleSave,employeeList, saveEmployeePermission, deleteEmployee, resetEmployeePassword, addEmployee } from '@/api/getData'

export default {
  name: 'EmployeeManagement',
  data() {
    return {
      addEmployeeObj: {
        loginname: '',
        password: '',
        employeeName: '',
        employeeMobile: '',
        employeeEmail: ''
      },
      addEmployeesRules: {
        loginname: [{ required: true, trigger: 'blur', message: '请输入雇员账号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入雇员账号密码' }],
        employeeName: [{ required: true, trigger: 'blur', message: '请输入雇员名字' }],
        employeeMobile: [{ required: true, trigger: 'blur', message: '请输入雇员手机' }],
        employeeEmail: [{ required: true, trigger: 'blur', message: '请输入雇员邮箱' }]
      },
      addLoading:false,
      maxPage: 1,
      tableData: [],
      pageSize: 10,
      total: 0,
      currentPage: 1,
      multipleSelection: [],
      value: false,
      tableLoading: false,
      deleteEmployee: false,
      login: {
        loginname: ''
      },
      employeeName: '',
      employeeMobile: '',
      employeeEmail: '',
      role: '',
      deleteEmployeeId: '',
      addEmployees: false,
      assign: false,
      roleList: [
        { name: '角色1',
          id: '1'
        },
        { name: '角色2',
          id: '2'
        }
      ],
      roleIds: [],
      pagekey: '',
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化列表
    async initData() {
      const returnData = await employeeList({
        page: {
          current: this.currentPage + '',
          size: this.pageSize + '',
          ascs: this.ascs,
          descs: this.descs
        }
      })
      this.tableData = [];
      this.total = 0;
      if (returnData._result) {
        returnData.data.records.map(item => {
          const obj = {}
          obj.id = item.id
          obj.loginname = item.login.loginname // 账号
          obj.employeeName = item.employeeName // 名字
          obj.employeeMobile = item.employeeMobile // 手机
          obj.employeeEmail = item.employeeEmail // 邮箱
          this.tableData.push(obj)
        })
        this.total = returnData.data.total
      }
      //初始化列表数据
      let s= await listRoles();
      this.roleList = [];
      if(s._result){
        for(let item of s.data){
          if(item.roleChar== "OEM_OTHER")this.roleList.push(item)
        }
      }
    },
    // 显示添加雇员弹窗
    async showAddRoles() {
      this.addEmployees = true;
      this.pagekey = await this.$getPageKey();
    },
    // 添加雇员
    submitAddEmployee(addEmployeeObj) {
      this.$refs[addEmployeeObj].validate(async valid => {
        if (valid) {
          this.addLoading=true;
          const returnData = await addEmployee({
            login: {
              loginname: this.addEmployeeObj.loginname,
              password: this.addEmployeeObj.password
            },
            employeeName: this.addEmployeeObj.employeeName,
            employeeMobile: this.addEmployeeObj.employeeMobile,
            employeeEmail: this.addEmployeeObj.employeeEmail
          },{pagekey:this.pagekey})
          this.addLoading=false;
          if (returnData._result) {
            this.addEmployees = false
            this.$message({ message: '雇员添加成功！', type: 'success' })
            this.initData()
          }
          this.pagekey = await this.$getPageKey();
        }
      })
    },
    // 显示删除雇员提示框
    async showDeleteEmployee(employee) {
      this.pagekey = await this.$getPageKey();
      this.deleteEmployeeId = employee.id
      //console.log(this.deleteEmployeeId)
      this.deleteEmployee = true
    },
    //分配权限
    async assignRole(employee) {
      this.pagekey = await this.$getPageKey();
      this.assign = true;
      this.addLoading = true;
      let a = await listEmployeeRolesIds({id:employee.id});
      this.addLoading=false;
      if(a._result){
        this.roleIds=a.data;
      }
      //console.log(this.roleIds);
      //获取权限列表

      this.assignEmployeeId=employee.id;


    },
    // 提交删除雇员
    async submitDeleteEmployee() {
      const returnData = await deleteEmployee({
        id: this.deleteEmployeeId
      },{
        pagekey: this.pagekey
      })
      //console.log(this.deleteEmployeeId)
      if (returnData._result) {
        this.deleteEmployee = false
        this.$message({ message: '雇员删除成功！', type: 'success' })
        this.initData()
      }
    },
    async repassword(emp){
      this.$confirm('确认将密码重置为123456么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let a= await resetEmployeePassword({id:emp.id});
        if(a._result&&a.data){
          this.$message.success("操作成功！")
        }
      }).catch(() => {

      });
    },

    async assignRoleToEmployee(employee){
        this.assign = false
       let a = await loginRoleSave({ids:this.roleIds,id:this.assignEmployeeId},{pagekey: this.pagekey});
      if(a._result&&a.data){
          this.$message.success("操作成功！")
      }
    },
    submitDeletePackage() {
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.initData();
    },
  }
}
</script>

<style scoped lang="scss">

</style>
